32 3 React & Django 인증 심화2 토큰 갱신과 인증 보호 페이지 구현 | ✅ 편저: 코담 운영자

🔄 React & Django 인증 심화 2: 토큰 갱신과 인증 보호 페이지 구현

이번 포스트에서는 React에서 JWT 토큰 자동 갱신과 인증이 필요한 페이지 보호 방법을 다룹니다.

---

📌 개요

JWT(Json Web Token)는 액세스 토큰(Access Token)과 리프레시 토큰(Refresh Token)을 조합해 짧은 수명의 액세스 토큰으로 보안을 강화합니다. 그러나 액세스 토큰이 만료될 때마다 새로 로그인하지 않도록 자동 갱신(refresh) 기능이 필요합니다.

이번에는 React 애플리케이션에서 만료된 토큰을 자동으로 갱신하고, 인증이 필요한 페이지에 비인가 접근을 차단하는 방법을 구현합니다.

---

9️⃣ React에서 토큰 자동 갱신 구현

🛠 AuthContext 개선

AuthContext.js를 수정해 액세스 토큰 만료 시 자동으로 리프레시 토큰을 사용하여 재발급하도록 합니다.

import React, { createContext, useState, useEffect } from 'react';
import axios from 'axios';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [authTokens, setAuthTokens] = useState(() =>
    JSON.parse(localStorage.getItem('authTokens'))
  );
  const [user, setUser] = useState(null);

  const loginUser = async (username, password) => {
    const response = await axios.post('/auth/jwt/create/', {
      username,
      password,
    });
    if (response.status === 200) {
      setAuthTokens(response.data);
      localStorage.setItem('authTokens', JSON.stringify(response.data));
    }
  };

  const logoutUser = () => {
    setAuthTokens(null);
    setUser(null);
    localStorage.removeItem('authTokens');
  };

  const updateToken = async () => {
    const response = await axios.post('/auth/jwt/refresh/', {
      refresh: authTokens?.refresh,
    });
    if (response.status === 200) {
      setAuthTokens({ ...authTokens, access: response.data.access });
      localStorage.setItem(
        'authTokens',
        JSON.stringify({ ...authTokens, access: response.data.access })
      );
    } else {
      logoutUser();
    }
  };

  useEffect(() => {
    const interval = setInterval(() => {
      if (authTokens) {
        updateToken();
      }
    }, 1000 * 60 * 4); // 4분마다 토큰 갱신 시도
    return () => clearInterval(interval);
  }, [authTokens]);

  return (
    <AuthContext.Provider value={{ authTokens, user, loginUser, logoutUser }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

---

🔒 인증 보호 페이지(Protected Route)

React Router를 사용해 인증되지 않은 사용자가 보호된 페이지에 접근하지 못하도록 합니다.

📁 components/PrivateRoute.js

import { Navigate } from 'react-router-dom';
import { useContext } from 'react';
import AuthContext from '../context/AuthContext';

const PrivateRoute = ({ children }) => {
  const { authTokens } = useContext(AuthContext);
  return authTokens ? children : <Navigate to="/login" />;
};

export default PrivateRoute;

---

📁 App.js 예제

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import PrivateRoute from './components/PrivateRoute';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/dashboard"
          element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

---

✅ 마무리

이번 포스트에서는 React에서 JWT 자동 갱신 로직과 인증 보호 페이지 구현 방법을 다뤘습니다. 이를 통해 액세스 토큰이 만료되더라도 사용자 경험을 해치지 않으면서 인증 상태를 유지할 수 있습니다.

다음 포스트에서는 프론트엔드와 백엔드의 보안 강화 (HTTP-only 쿠키, CSRF 보호 등) 를 다루겠습니다.